<!-- header -->
<div id="_main_header_banner" class="header">
	<img id = "header_logo" src="/resource/image/logo.svg" width="64px" height="64px" style="margin-left: 64px;margin-top: 16px;"/>
	<div style="float: left;">
		<h2 style="color: white;margin-top: 32px;margin-left: 150px;position: fixed;float: left;"><@spring.message "module.common.html.title"/></h2>
	</div>
	<div class="btn-group" style=" float: right;margin-top: 33px;margin-right:20px;">
		<button class="btn btn-info" onclick="doShowDialog('aboutDialog')">
			   <span class="glyphicon glyphicon-info-sign"></span>&nbsp;<@spring.message "module.dashboard.about"/>
		</button>
	</div>
	<div class="header_liner"></div>
</div>

<div class="modal fade" id="aboutDialog" tabindex="-1" role="dialog">
	<div class="modal-dialog" style="width: 420px;">
		<div class="modal-content">
			<div class="modal-header" >
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"><@spring.message "module.common.html.title"/></h4>
			</div>
			<div class="modal-body">
			    <div style="text-align: center;border:none;height: 150px;">
			        <img src="/resource/image/logo.svg" width="100px" height="100px" style="box-shadow: 0px 0px 7px 2px #d1d3d6;border: 1px solid #dfdfe0;padding: 10px;border-radius: 100px;margin-top: 20px;"/>
					<h4 style="margin-top: 15px;"><@spring.message "module.dashboard.about.version"/></h4>
				</div>
				<ul class="list-group" style="margin-top: 20px;">
					<li class="list-group-item" style="border-radius: 0px;">
						<@spring.message "module.dashboard.about.copyright"/>
					</li>
					<li class="list-group-item" style="border-radius: 0px;">
						<@spring.message "module.dashboard.about.author"/>
					</li>
					<li class="list-group-item" style="border-radius: 0px;">
						<@spring.message "module.dashboard.about.author.qq"/>
					</li>
					<li class="list-group-item" style="border-radius: 0px;">
						<@spring.message "module.dashboard.about.author.wechat"/>
					</li>
				</ul>
        	</div>
		</div>
	</div>
</div>


<div id="global_mask" style="display: none; position: absolute; top: 0px; left: 0px; z-index: 9999; background-color: rgb(20, 20, 20); opacity: 0.5; width: 100%; height: 100%; overflow: hidden; background-position: initial initial; background-repeat: initial initial;"></div>
<script>
var logo = $("#header_logo");
function animateUp(){
	 logo.animate({marginTop:"0px"}, 720, animateDown);
}
function animateDown(){
	logo.animate({marginTop:"20px"}, 720 ,animateUp);
}
$(document).ready(function(){ 
	animateUp();
});
</script>